const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x = localStorage.getItem('x')
const xObject = JSON.parse(x)
const hashMap = xObject || [
  { logo: 'A', url: 'https://www.acfun.cn' },
  { logo: 'B', url: 'https://bilibili.com' }
]
$siteList.find('li:not(.last)').remove()

const simplifyUrl = (url) => {
  // /replace 中的url是不会变的
  return url.replace('https://', '')
    .replace('http://', '')
    .replace('www.', '')
    .replace(/\/.*/, '') // 删除/开头的内容
}

const render = () => {
  $siteList.find('li:not(.last)').remove()
  hashMap.forEach((node, index) => {
    const $li = $(`
    <li>
        <div class="site">
          <div class="logo">
            <span>${node.logo}</span>
          </div> 
          <div class="link">${simplifyUrl(node.url)}</div> 
          <div class="close">
            <svg class="icon">
              <use xlink:href="#icon-close"></use>
            </svg>
          </div>
        </div> 
    </li>
  `).insertBefore($lastLi)
    $li.on('click', () => {
      window.open(node.url)
    })
    $li.on('click', '.close', (e) => {
      // 阻止冒泡和默认事件
      e.stopPropagation()
      e.preventDefault()
      hashMap.splice(index, 1)
      render()
    })
  })
}

render()



$('.addButton')
  .on('click', () => {
    let url = window.prompt('请输入要添加的网址')
    if (url.indexOf('http') !== 0) {
      url = 'https://' + url
    }
    console.log(url);
    hashMap.push({ logo: simplifyUrl(url)[0].toUpperCase(), url: url })
    render()
  })

window.onbeforeunload = () => {
  const string = JSON.stringify(hashMap)
  localStorage.setItem('x', string)
}